<template>
	<div>
		<!--查询参数-->
		<div class="section-panel">
			<div style="display: flex;">
				<div style="display: flex; ">
					<div style="width: 65px; line-height: 30px;">页面名称:</div>
					<div>
						<el-input placeholder="请输入菜单名称" v-model="filterForm.title" clearable></el-input>
					</div>
				</div>
				<div style="margin-left: 10px;">
					<el-button icon="el-icon-search" type="primary">查询</el-button>
				</div>
			</div>
		</div>

		<!--查询结果-->
		<div class="section-panel mt5 p10">
			<el-table :data="menuList" row-key="mid" :tree-props="{children:'children', hasChildren:'hasChildren'}">
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="title" label="菜单名称"></el-table-column>
				<el-table-column prop="icon" label="图标" align="center">
					<template v-slot="scope">
						<i :class="scope.row.icon"></i>
					</template>
				</el-table-column>
				<el-table-column prop="key" label="菜单标识"></el-table-column>
				<el-table-column prop="path" label="路径"></el-table-column>
				<el-table-column prop="enable" label="状态">
					<template v-slot="scope">
						<el-switch active-value="1" :value="scope.row.enable"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="order" label="权重"></el-table-column>
				<el-table-column  label="操作" align="center" width="200px">
					<template v-slot="scope">
						<el-button-group>
							<el-button icon="el-icon-edit-outline">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</div>

	</div>
</template>

<script>
	import http from '@/utils/http';
	export default {
		data() {
			return {
				filterForm: {
					title: ""
				},
				menuList: []
			}
		},
		mounted() {
			this.loadDataList();
		},
		methods:{
			loadDataList(){
				http.post("/api/admin/authmenu/list_by_page").then(res => {
					if (res.status == 200 && res.data.code) {
						this.menuList=res.data.list;
						console.log(this.tableData);
					}
				}).catch(error => {})
			}
		}
	}
</script>

<style>
</style>